<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>自选图表</title>
    <style>
        .content{
            width: 96%;
            margin: 0 auto;
            /*border:  1px solid #00a0df;*/
            height: auto;
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
        }
    </style>
</head>
<body>

<div class="content">
    <div id="imgBox" align="center">

    </div>

</div>

<script src="js/jquery-2.2.4.min.js"  type="text/javascript" ></script>
<script src="js/jQuery.cookie.js"  type="text/javascript" ></script>


<script>

    $(function(){
        hecheng();
    })

   var  data = [
        {name:"柱状图",title:'柱状图',subtitle:'转眼间，2018年即将过半，在7月里，有一大波关乎你钱包的新政袭来：进口日用消费品关税的降低，流量“漫游”费的取消等等，下面看看还有哪些新政呢？',path:"images/1.jpg",source:"MORE大数据工作室《西部人才“磁极”炼成记 数说成都人才新政300天》",scene:"适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较，用于显示一段时间内的数据变化或显示各项之间的比较情况。"},
        // {name:"条形图",title:'饼图',subtitle:'转眼间，2018年即将过半，在7月里，',path:"images/2.jpg",source:"MORE大数据工作室《88个贫困县2017电商全景》",scene:"显示各个项目之间的比较情况，可参考柱状图；"},
        // {name:"折线图",title:'柱状图',subtitle:'副标题',path:"images/3.jpg",source:"MORE大数据工作室《数说成都火锅的前世今生》",scene:"折线图适合二维的大数据集，还适合多个二维数据集的比较。"},
        // // {name:"环图",title:'柱状图',subtitle:'副标题',path:"images/4.jpg",source:"MORE大数据工作室《全球引凤 群贤毕至 大数据看四川人才工作》",scene:"显示各项的大小与各项总和的比例。适用简单的占比比例图，在不要求数据精细的情况适用。"},
        // {name:"饼图",title:'柱状图',subtitle:'副标题',path:"images/4-1.jpg",source:"MORE大数据工作室《凝聚诚信力量 倡导诚信兴商 3.15诚信口碑企业榜》",scene:"显示各项的大小与各项总和的比例。适用简单的占比比例图，在不要求数据精细的情况适用。"},
    ],base64=[];

    ///合成方法
    function hecheng(){
        getBodyHeight(data);
        draw(function(){
            document.getElementById('imgBox').innerHTML='<img src="'+base64[0]+'">';
        })
    }

    // var data=['img1.png','img2.png','img3.png','img4.png'],base64=[];

    // var imgData = '';


    var canvasWidth = $(".content").width();


    function getBodyHeight(data){
        var height = 0 ;
        var maxNum = data.length
        for(var i=0;i<maxNum;i++){
            var subtitle = data[i]['subtitle']

            var h =  $("<img/>").attr("src", data[i].path).load(function(i,subtitle){
                pic_real_height = this.height; // work for in memory images.
                var windowWidth = $(window).width()

                var subheight  =  getSustrHeight(subtitle,windowWidth)
                //计算和canvas需要画的相同的高
                height += ((windowWidth*0.96)/this.width)*this.height+subheight+100

                if(i==maxNum){
                    // sessionStorage.canvasHeight = height
                    console.log(height)
                    $.cookie('canvasHeight',height)

                }
            })
        }

    }

    function getSustrHeight(str,windowWidth){
        var initHeight= 28;//绘制字体距离canvas顶部初始的高度
        var lastSubStrIndex= 0; //每次开始截取的字符串的索引
        var  lineWidth = 0;
        var canvasWidth = windowWidth *0.9;
        for(let i=0;i<str.length;i++){
            if(lineWidth>canvasWidth){
                initHeight+=25;//20为字体的高度
                lastSubStrIndex=i;
                lineWidth=0;
            }else if(i==str.length-1){//绘制剩余部分
                initHeight+=5;
            }
        }
        return initHeight;
    }


    //////执行生成方法
    function draw(fn,left,top){
        var canvasHeight = 0
        if($.cookie('canvasHeight')==null){
            canvasHeight = $(window).height()
        }else{
            canvasHeight =$.cookie('canvasHeight')
        }

        var c=document.createElement('canvas'),
            ctx=c.getContext('2d'),
            len=data.length;
        c.width=canvasWidth
        c.height=canvasHeight
        ctx.rect(0,0,c.width,c.height);
        ctx.fillStyle='#fff';
        ctx.fill();

        var left = 0
        var top = 0
        function drawing(n,left,top){
            if(n<len){
                if(n==0){
                    top = c.height - c.height*0.925;
                    left = c.width - c.width*0.9;
                }
                var img=new Image;
                img.crossOrigin = 'Anonymous'; //解决跨域
                img.src=data[n].path;
                img.onload=function(){


                   ctx.font="18px 微软雅黑";
                   ctx.fillStyle = '#000000'
                   ctx.fillText(data[n].title,left*4.4,top);

                   var initHeight =  sustr(ctx,c,data[n].subtitle,left,top)
                   var imgHeight = (c.width/img.width)*img.height
                   top = initHeight+20;
                   ctx.drawImage(img,0,top,c.width,imgHeight);
                   top  += imgHeight+50
                   drawing(n+1,left,top);//递归
                }
            }else{
                //保存生成作品图片
                base64.push(c.toDataURL("image/jpeg",0.8));
                //alert(JSON.stringify(base64));
                fn();
            }
        }
        drawing(0);
    }



    function sustr(ctx,c,str,left,top){
        var initHeight= top+28;//绘制字体距离canvas顶部初始的高度
        var lastSubStrIndex= 0; //每次开始截取的字符串的索引
        var  lineWidth = 0;
        var canvasWidth = c.width*0.9;
        ctx.fillStyle = '#000000';
        ctx.font='13px 微软雅黑';

        for(let i=0;i<str.length;i++){
            lineWidth+=ctx.measureText(str[i]).width;
            if(lineWidth>canvasWidth){
                ctx.fillText(str.substring(lastSubStrIndex,i),left*0.3,initHeight);//绘制截取部分
                ctx.strokeStyle='#FFFFFF';
                ctx.stroke();
                initHeight+=25;//20为字体的高度
                lastSubStrIndex=i;
                lineWidth=0;
            }else if(i==str.length-1){//绘制剩余部分
                ctx.fillText(str.substring(lastSubStrIndex,i+1),left*0.3,initHeight);
                ctx.strokeStyle='#FFFFFF';
                ctx.stroke();
                if(lineWidth==0 || lineWidth<150){
                    lineWidth = 100;
                }
                initHeight+=5;
            }
        }
        return initHeight;
    }


</script>

</body>
</html>